﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ReportModel>" %>

<%@ Import Namespace="ReportService.Models" %>
<%@ Import Namespace="ReportService.Models.ViewModels" %>
<div>
<% using (Ajax.BeginForm("ShowStoreReport", "Report", null, new AjaxOptions { HttpMethod = "post", UpdateTargetId = "ReportViewPlace" }))
    { %>
    <div class="head">
        <h3>
            REPORT ENERGY COMSUMMING FOR STORE
        </h3>
    </div>

    <div class="labelcol">
        <label>Period:</label>
    </div>    
    <div class="valuecol">
        <select id="period" style="width:200px;">
            <option>Last Week</option>
            <option>This Week</option>            
            <option>Last Month</option>
            <option selected="selected">This Month</option>            
            <option>This Year</option>
            <option>By Month</option>
            <option>By Period</option>
        </select>
        <div id="monthSliderContainer" style="padding-top:10px;padding-bottom:20px;display:none;">
            <div id="slider-range"></div>
        </div>
    </div>
    <div class="valuecol">
        <%: Html.TextBoxFor(m => m.StoreReport.FromDate, new { @id = "dateFrom", @class = "dateinput" })%>
    </div>
    <div class="valuecol">
        <%: Html.TextBoxFor(m => m.StoreReport.ToDate, new { @id = "dateTo", @class = "dateinput" })%>
    </div>
    
    <div class="clear_both"></div>

    <div class="labelcol">
        <label>Store:</label>
    </div>
    <div class="valuecol">        
        <%: Html.DropDownListFor(m => m.StoreReport.StoreName, new SelectList(Model.ListAllStores, "StoreName", "StoreName"), "-- Please select store --", new { @id = "cboStore", @onchange = "OnLoadDevice()", @style = "width:200px;" })%>
    </div>
    
    <div class="clear_both"></div>
    
    <div class="labelcol">
        <label>Device:</label>
    </div>
    <div class="valuecol">
        <div id="lstDevice" class="list-container">
            <% if (ViewData["DeviceOfSelectedStore"] != null)
               { %>
               <%= ViewData["DeviceOfSelectedStore"] %>
               <script language="javascript" type="text/javascript">
                    $('input.store-device').click(function () { onChecked(this, "hdListExceptDevice"); });
               </script>
            <% } %>            
        </div>
        <%: Html.HiddenFor(m => m.StoreReport.ListExceptDevicesOfStore, new { @id = "hdListExceptDevice" })%>
    </div>    
    
    <div class="clear_both"></div>
    
    <div class="foot">
        <input type="button" id="btnShowStoreReport" value="Show Data" onclick='OnShowData("hdSubmitStoreReport")' />
        <input type="button" id="btnExportStoreReport2Excel" value="Export Excel" />
        <input type="submit" id="hdSubmitStoreReport" style="display:none;" />
    </div>
    <script language="javascript" type="text/javascript">
        $(function () {
            var minDate = new Date(<%= Model.ReportSinceYear %>, 0, 1);
            var maxDate = new Date(<%= DateTime.Now.Year %>, 12, 0);
            var monthCount = ((<%= DateTime.Now.Year %> - <%= Model.ReportSinceYear %>) + 1) * 12;
            var startSlide = (new Date()).getMonth() + monthCount - 12;
            $('#slider-range').slider({ range: true,
                min: 0,
                max: monthCount,
                values: [startSlide, startSlide + 1],
                slide: function (event, ui) {
                    var date = new Date(minDate.getFullYear(), minDate.getMonth() + ui.values[0], 1);
                    $('#dateFrom').val($.datepicker.formatDate('dd/mm/yy', date));

                    date = new Date(minDate.getFullYear(), minDate.getMonth() + ui.values[1], 0);
                    $('#dateTo').val($.datepicker.formatDate('dd/mm/yy', date));
                }
            });

            //init for datepicker
            $("#dateFrom, #dateTo").datepicker({
                buttonImage: "/Content/images/calendar.png",
                buttonImageOnly: true,
                buttonText: 'select date',
                showOn: 'both',
                dateFormat: "dd/mm/yy",                
                numberOfMonths: 1,
                minDate: minDate,
                maxDate: maxDate,
                onSelect: function (selectedDate) {
                    var option = this.id == "from" ? "minDate" : "maxDate",
					instance = $(this).data("datepicker"),
					date = $.datepicker.parseDate(
						instance.settings.dateFormat ||
						$.datepicker._defaults.dateFormat,
						selectedDate, instance.settings);
                }
            });

            //register onchange event for Period dropdownlist
            $('#period').change(function () {
                var text = $("#period option:selected").text();
                SetDateRange(text);
            });

            SetDateRange('This Month');
        });        
        
        function OnLoadDevice() {
            var data = $('select#cboStore option:selected').val();
            $("#lstDevice").html('<div style="padding:5px"><img src="../../Content/images/ajax-loader.gif" alt="" /></div>');
            $.post('/Report/LoadDevice',
                { selectedStore: data },
                function (response) {
                    $("#lstDevice").html(response);
                    $("#hdListExceptDevice").val('');
                    $('input.store-device').click(function () { onChecked(this, "hdListExceptDevice"); });
                }
            );
        }
    </script>
<%  } %>
</div>
